<template>
  <el-input class="mt-2" v-model="filterText" :placeholder="props.placeholder" />
  <div class="overflow-y-auto tree-div">
    <el-tree
      :data="menuList"
      :props="props.defaultProps"
      @node-click="handleNodeClick"
      highlight-current
      :expand-on-click-node="false"
      node-key="id"
      ref="treeList"
      class="tree"
      :filter-node-method="filterNode"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-tooltip
            v-if="node.label.length >= 9"
            class="item"
            effect="dark"
            :content="node.label"
            placement="right"
          >
            <span class="lable">{{ node.label }} </span>
          </el-tooltip>
          <span class="lable" v-else>{{ node.label }}</span>
          <span style="color: #cccccc">{{
            props.type == "spu"
              ? data.spu_count || "0"
              : props.type == "sku"
              ? data.sku_count || "0"
              : ""
          }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script setup name="SelectCategoryTree">
import useCommonStore from "@/store/modules/common";
import { onMounted } from "vue";
const commonStore = useCommonStore();
const menuList = computed(() => {
  return commonStore.categoryOptions || [];
});

const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入",
  },
  defaultProps: {
    type: Object,
    default: {
      label: "name",
      children: "son",
    },
  },
  type: {
    type: String,
    default: "",
  },
});

// 侧边栏筛选
const treeList = ref();
const filterText = ref("");
// 监听搜索输入框
watch(filterText, (val) => {
  treeList.value.filter(val);
});
// tree 过滤方法
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};

const emit = defineEmits(["node-click"]);

const handleNodeClick = (data) => {
  emit("node-click", data);
};

onMounted(() => {
  if (menuList.value?.length == 0) {
    commonStore.getColumnsList();
  }
});
</script>
<style lang="scss" scoped>
.tree-div {
  height: calc(100vh - 220px);
}
.tree {
  width: 100%;
  padding-top: 5px;

  &:deep(.el-tree-node) {
    padding: 5px 0;
  }

  .custom-tree-node {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    width: 100%;

    span {
      align-self: center;
    }

    .lable {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .status {
      font-size: 12px;
      color: #cdcfd4;
    }
  }

  &:deep(.el-tree-node__content) {
    padding-right: 10px;
    background-color: transparent;
  }
}
</style>
